@charset "UTF-8";

@import '~scss/themes/index.scss';

$component-name: 'txt';

.ui-#{$component-name} {
	color: $color-text-base;
	font-size: $font-size-base;
	line-height: 1.15;

	/***********************
    按照类型进行设置
  ***********************/
	// 标题字体
	&.#{$component-name}-heading {
		font-size: $font-size-heading;
		color: $color-text-base;
	}
	// 副标题
	&.#{$component-name}-subhead {
		font-size: $font-size-subhead;
		color: $color-text-secondary;
	}
	// 辅助描述
	&.#{$component-name}-caption {
		font-size: $font-size-caption;
		color: $color-text-caption;
		line-height: $line-height-paragraph;
	}
	// 次要辅助描述
	&.#{$component-name}-caption-sm {
		font-size: $font-size-caption-sm;
		color: $color-text-caption;
	}
	/***********************
      按照字体颜色
    ***********************/
	// 主题色
	&.#{$component-name}-primary {
		color: $brand-primary;
	}
	// 字体反色
	&.#{$component-name}-white {
		color: $color-text-base-inverse;
	}
	// 提示性字体颜色
	&.#{$component-name}-info {
		color: $color-text-secondary;
	}
	&.#{$component-name}-disabled {
		color: $color-text-disabled;
	}
	&.#{$component-name}-warning {
		color: $brand-warning;
	}
	&.#{$component-name}-highlight {
		color: $brand-important;
	}
	&.#{$component-name}-link {
		color: $color-link;
	}

	/***********************
      按照字体大小
    ***********************/

	&.#{$component-name}-mini {
		font-size: $font-size-mini;
	}
	&.#{$component-name}-small {
		font-size: $font-size-small;
	}
	&.#{$component-name}-large {
		font-size: $font-size-large;
	}

	&.#{$component-name}-weight {
		font-weight: bold;
	}
}
